<template>
	<view class="container">
		<view style="height: 100rpx;padding-left: 20rpx;;margin-top: 30rpx;display: flex;flex-direction: row;align-items: center;background-color: #FFF;">
			<u--input v-model="code" placeholder='请输入核销码' maxlength='20' border="none" fontSize='36rpx'/>
		</view>
		<view class="footer">
			<jc-button :width="600" title='核销' @click='submit' backgroundColor="#DD4949"></jc-button>
		</view>
		<u-modal :show="uModalShow" @confirm="confirmCancelCoupon" @cancel='uModalShow=false' confirmText='确认核销' showCancelButton='true' :content='uModalContent' :asyncClose="true">
			<view class="slot-content">
				<view style="padding: 40rpx 0;">
					<view style="font-size: 36rpx;">优惠券名称：{{couponModel.name}}</view>
					<view style="font-size: 36rpx;" v-if="couponModel.userModel">兑换人手机号：{{couponModel.userModel.phone}}</view>
					<view style="font-size: 32rpx;margin-top: 16rpx;">内容：{{couponModel.content}}</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		coupon
	} from '@/api/coupon.js'
	export default{
		components: {},
		data() {
			return {
				code: '',
				uModalShow: false,
				couponModel: {},
			}
		},
		onLoad() {
		},
		methods:{
			submit(){
				if(!this.code){
					uni.showToast({
						title: '请输入核销码',
						icon: 'none'
					})
					return
				}
				var _this = this
				coupon.checkCoupon({
					code: this.code,
				}).then(res => {
					if (res.data.code == 10000) {
						_this.uModalShow = true
						_this.couponModel = res.data.data
					}
				})
			},
			confirmCancelCoupon(){
				coupon.cancelCoupon({
					code: this.code,
					cancelType: '2'
				}).then(res => {
					if (res.data.code == 10000) {
						this.uModalShow = false
						uni.showToast({
							title: '核销成功',
							icon: 'success',
							duration: 2000
						})
						setTimeout(function () {
							uni.navigateBack()
						},2000)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container{
		
	}
	.footer{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
	}
</style>
